【Day 14】雙層架構部署：Web 前端 + 後端 API 在 K8s 上的通訊整合

2026 iThome 鐵人賽

DAY 14

Kubernetes

從零開始的雲端實戰：30 天 Kubernetes 核心觀念與部署指南系列第 14 篇

18th鐵人賽

b132009

2026-08-26 10:47:58

153 瀏覽

分享至

今日目標

融會貫通第二週所學：Deployment、Service（ClusterIP / NodePort）與 ConfigMap。
實戰部署標準的雙層（Two-Tier）微服務架構：後端 API 服務 + 前端 Web 服務。
透過 K8s 內部 DNS 機制實現「前端在集群內部呼叫後端 API」，並透過單一入口對外提供服務。

今日實作架構設計

在真實專案中，最常見的就是「前端 UI 介面」搭配「後端 REST API」。今天我們將在 Minikube 上搭建這個微服務架構：

後端服務（Backend API）：
- 使用 Deployment 部署 2 個副本的後端 API。
- 透過 ClusterIP Service 暴露在集群內部（服務名稱：backend-service，Port: 8080）。
- 不需要對外公開，僅供前端服務在內部透過 DNS 呼叫。
前端服務（Frontend Web）：
- 透過 ConfigMap 注入後端 API 的內部連線網址（http://backend-service:8080）。
- 使用 Deployment 部署前端 Nginx 伺服器。
- 透過 NodePort Service 對外公開，讓本機瀏覽器可以訪問。

實戰演練：雙層架構部署步驟

步驟 1：建立後端 API（Deployment + ClusterIP Service）

建立 backend-app.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-deployment
  labels:
    app: backend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend-api
          image: hashicorp/http-echo
          args: ["-text=Response from Backend API (v1.0) via K8s Internal Service!"]
          ports:
            - containerPort: 5678
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  type: ClusterIP
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 8080
      targetPort: 5678

套用後端配置：

kubectl apply -f backend-app.yaml

步驟 2：建立前端設定（ConfigMap）

我們建立一個動態前端網頁，透過 JavaScript 在瀏覽器端或反向代理端讀取後端資料。這裡我們利用 ConfigMap 將自訂的 index.html 與 Nginx 設定注入。

建立 frontend-config.yaml：

apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-html-config
data:
  index.html: |
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>K8s Two-Tier Architecture</title>
      <style>
        body { font-family: sans-serif; text-align: center; margin-top: 60px; background-color: #f4f7f6; }
        .card { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: inline-block; }
        h1 { color: #326ce5; }
      </style>
    </head>
    <body>
      <div class="card">
        <h1>Kubernetes 雙層架構整合成功！</h1>
        <p>前端服務：<strong>Nginx Web Server</strong></p>
        <p>後端內部通訊目標：<strong>http://backend-service:8080</strong></p>
      </div>
    </body>
    </html>

套用 ConfigMap：

kubectl apply -f frontend-config.yaml

步驟 3：建立前端 Web（Deployment + NodePort Service）

建立 frontend-app.yaml，掛載 ConfigMap 並透過 NodePort 對外暴露：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
  labels:
    app: frontend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend-web
          image: nginx:1.25
          ports:
            - containerPort: 80
          volumeMounts:
            - name: html-volume
              mountPath: /usr/share/nginx/html
      volumes:
        - name: html-volume
          configMap:
            name: frontend-html-config
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-service
spec:
  type: NodePort
  selector:
    app: frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
      nodePort: 30088

套用前端配置：

kubectl apply -f frontend-app.yaml

驗證整合成果

1. 檢查所有元件運行狀態

kubectl get pods,svc

確認 backend-deployment（2 副本）與 frontend-deployment（2 副本）的 Pod 均為 Running，且 backend-service（ClusterIP）與 frontend-service（NodePort）均已就緒。

2. 測試內部通訊（從前端 Pod 呼叫後端 Service）

進入前端任一個 Pod，使用 curl 測試是否能透過內部 DNS backend-service:8080 抓到後端資料：

# 隨機挑選一個前端 Pod 進入
kubectl exec -it $(kubectl get pod -l app=frontend -o jsonpath='{.items[0].metadata.name}') -- curl http://backend-service:8080

預期輸出：

Response from Backend API (v1.0) via K8s Internal Service!

這代表集群內部 DNS 與 ClusterIP 負載平衡完全正常！

3. 本機瀏覽器存取前端頁面

在終端機執行：

minikube service frontend-service --url

點擊輸出的網址，即可在瀏覽器看到我們部署的前端頁面。

第二週完賽總結

恭喜順利完成前兩週共 14 天的挑戰！

我們已經完整掌握了 Kubernetes 的「無狀態應用維運核心」：

Day 08-09：用 Deployment 與 ReplicaSet 實現多副本自癒與零停機升級。
Day 10-12：用 Service（ClusterIP, NodePort, LoadBalancer）與 Ingress 搞定四層與七層流量調度。
Day 13-14：用 ConfigMap 解耦設定，並串聯出標準的前後端微服務架構。

然而，現實世界的系統往往需要記錄帳號密碼、儲存資料庫數據（如 MySQL）。無狀態的容器重啟後資料會消失，敏感的密碼也不能明文寫在 ConfigMap 裡。

下週進入第三週（狀態儲存、進階物件與打包），明天 Day 15 我們將正式探討安全性：「機密資料管理：Secret 的加密機制與安全掛載」！